<template>
	<view>
		<ttBar leftIcon="icon-back" title="门店信息" ></ttBar>
		<view class="mainCnt">
			<!-- <view class="progressBox">
				<view class="progressItem active">
					<text class="progressNum">1</text>
					<text class="progressText">填写店铺信息</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="progressItem">
					<text class="progressNum">2</text>
					<text class="progressText">门店资质认证</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view> -->
			
			<view class="infoBox">
				<view class="row">
					<text class="required">*</text>
					<text class="infoLabel">店铺名称</text>
					<input type="text" value="" placeholder="请填写门店名称" v-model="shopData.name" maxlength="40" />
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">店铺电话</text>
					<input type="text" value="" placeholder="请填联系方式,固话请加区号" v-model="shopData.phone" maxlength="20" />
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">选择地区</text>
					<input type="text" value="" disabled="true" placeholder="点击选择省市区" v-model="ssq" @tap="cittSelect" />
					<text class="iconfont icon-right" @tap="cittSelect"></text>
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">详细地址</text>
					<input type="text" value="" placeholder="请填写门店详细地址" v-model="shopData.address" maxlength="100" />
				</view>
				<view class="mapImg">
					<image :src="imgSrc"  :style="{'width':imgWidth+'px','height':imgHeight+'px'}"></image>
					<text @tap="toPage" data-url="selectLocation" :data-longlat="longAndLat">编辑定位</text>
				</view>
				<button class="nextBtn" @tap="nextStep">提交审核</button>
			</view>
		</view>
		<w-picker mode="region" :defaultVal="pkDefault" :hideArea="false" @confirm="onConfirm" ref="region"></w-picker>
		<poup ref="poup"></poup>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import wPicker from "@/components/w-picker/w-picker.vue";
	import COMM from "@/common/common.js";
	import API from "@/common/api.js";
	import poup from "@/components/poup/poup.vue";
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			wPicker,
			poup,
			avatar
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				settledInfo:state=>state.settled.settledProgress
			})
		},
		data() {
			return {
				ssq: '', 		//省市区
				shopData:{
					address:'',		//店铺详细地址
					name: '', 		//店铺名称
					phone:'',		//店铺联系方式
					longi:'',		//纬度
					lati:'',		//经度
					areaId:'',		//区ID
					realname:'',	//法人姓名
					cardNo:'',		//法人身份证号
					certi:'',		//营业执照
					cardz:'',		//身份证正面
					cardf:'',		//身份证反面
				},
				longAndLat: '118.794139,32.040649', //坐标
				pkDefault: [], //定位地址,
				imgSrc: '', //定位静态图片,
				imgWidth: uni.getSystemInfoSync().screenWidth - uni.upx2px(76),
				imgHeight: parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(76)) * 0.5),
				
			};
		},
		methods: {
			cittSelect() {
				this.$refs.region.show()
			},
			onConfirm(e) {
				console.log(e);
				this.ssq = e.result
				this.shopData.areaId=e.checkValue[2]
			},
			nextStep() {
				if (!this.shopData.name) {
					uni.showToast({
						title: '请输入门店名称',
						icon: 'none'
					});
				}else  {
					let _data=this.shopData;
					_data.userId=this.userInfo.userId
					_data.realname=this.settledInfo.realname
					_data.cardNo=this.settledInfo.cardNo
					_data.certi=this.settledInfo.certi
					_data.cardNo=this.settledInfo.cardNo
					_data.cardz=this.settledInfo.cardz
					_data.cardf=this.settledInfo.cardf
					this.$store.dispatch("addShop",_data)
					.then(res=>{
						
						this.$store.dispatch("getShopListByUid",this.userInfo.userId)
						uni.showToast({
							title: '添加店铺成功',
							icon: 'none'
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
				}
			},
			
			getMapImg() {
				let imgurl= API.getMapImg(this.longAndLat, this.imgWidth + '*' + this.imgHeight)
				this.imgSrc=imgurl
				
			}
		},
		onLoad(cfm) {
			// this.$store.dispatch("getSettledByUid",this.userInfo.userId)
			// COMM.getSSQbyLocation().then(res => {
			// 	console.log(res);
			// 	this.pkDefault[0] = res[0].regeocodeData.addressComponent.province;
			// 	this.pkDefault[1] = res[0].regeocodeData.addressComponent.city;
			// 	this.pkDefault[2] = res[0].regeocodeData.addressComponent.district;
			// 	this.shopData.areaId= res[0].regeocodeData.addressComponent.adcode
			// 	this.ssq = this.pkDefault.join('');
			// 	this.shopData.address = res[0].desc;
			// 	this.longAndLat=res[0].longitude + ',' + res[0].latitude;
			// 	this.shopData.longi=res[0].longitude;
			// 	this.shopData.lati=res[0].latitude;
			// 	this.getMapImg()
				
			// });
			
			
			uni.$on("init",res=>{
				this.pkDefault=res.ssq
				this.ssq = res.ssq.join('');
				this.shopData.address = res.tapRow.name;
				this.longAndLat=res.tapRow.location
				this.shopData.longi=res.longi;
				this.shopData.lati=res.lati;
				this.shopDetail.areaId=res.areaId;
				this.getMapImg()
			})
		},
		onPullDownRefresh() {
			// setTimeout(() => {
			// 	this.$store.dispatch("getSettledByUid",this.userInfo.userId)
			// 	COMM.getSSQbyLocation().then(res => {
			// 		console.log(res);
			// 		this.pkDefault[0] = res[0].regeocodeData.addressComponent.province;
			// 		this.pkDefault[1] = res[0].regeocodeData.addressComponent.city;
			// 		this.pkDefault[2] = res[0].regeocodeData.addressComponent.district;
			// 		this.shopData.areaId= res[0].regeocodeData.addressComponent.adcode
			// 		this.ssq = this.pkDefault.join('');
			// 		this.shopData.address = res[0].desc;
			// 		this.longAndLat=res[0].longitude + ',' + res[0].latitude;
			// 		this.shopData.longi=res[0].longitude;
			// 		this.shopData.lati=res[0].latitude;
			// 		this.getMapImg()
					
			// 	});
			// 	uni.stopPullDownRefresh();
			// }, 1500)
		}

	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.mainCnt {
		padding-top: 22upx;
	}

	.progressBox {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 30px 10upx;
		justify-content: space-around;

		.progressItem {
			display: flex;
			align-items: center;

			.progressNum {
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				text-align: center;
				line-height: 40upx;
				background-color: #a0a0aa;
				flex-shrink: 0;
				flex-grow: 0;
				font-size: 26upx;
				font-weight: bold;
				color: #ffffff;
				margin-right: 5upx;
			}

			.progressText {
				font-size: 24rpx;
				font-weight: bold;
				color: #07080d;
			}
		}

		.active {
			.progressNum {
				background-color: #ffb423;
				color: #07080d;
			}
		}
	}

	.typeBox {
		margin-top: 22upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 20px 45upx;

		.typeInfo {
			display: flex;
			flex-direction: column;
			flex: 1;

			.typeTitle {
				font-size: 35rpx;
				font-weight: bold;
				color: #07080d;
			}

			.typeText {
				margin-top: 12upx;
				font-size: 28rpx;
				color: #8c8c8f;
			}
		}

		.editWords {
			font-size: 32rpx;
			color: #a0a0aa;
		}

		.iconfont {
			font-size: 32upx;
			color: #a0a0aa;
			margin-left: 10upx;
		}
	}

	.infoBox {
		margin-top: 22upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 0 15upx;

		.row {
			display: flex;
			width: 100%;
			border-bottom: 1px solid #e7e7e7;
			padding: 55upx 32upx 27upx 24upx;
			align-items: center;

			.infoLabel {
				font-size: 30rpx;
				color: #07080d;
				margin-right: 64upx;

			}

			input {
				font-size: 30upx;
				flex-grow: 1;
				width: 350upx;
				flex: 1;
			}

			.iconfont {
				font-size: 28upx;
				color: #07080d;
			}

			
		}
		.mapImg {
			margin-top:20upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			>text{
				display: inline-block;
				position: absolute;
				right: 20upx;
				top: 20upx;
				font-size: 28upx;
				background-color: #FFFFFF;
				border-radius: 10upx;
				padding: 10upx 30upx;
				box-shadow: 0upx 5upx 10upx 0rpx 
						rgba(0, 0, 0, 0.3);
			}
		}
	}

	.nextBtn {
		height: 88upx;
		background-color: #ffb423;
		border-radius: 44upx;
		line-height: 88upx;
		width: 80%;
		color: #FFFFFF;
		margin-top: 50upx;
		margin-bottom: 38upx;
	}

	.nextBtn:after {
		border: none;
	}
</style>
